<template>
  <div class="login">
    <div class="login_box">
      <div class="login_box_log">
        <div class="login_box_log_img">
          <img src="../assets/logo.png" alt="" />
        </div>
      </div>
      <div class="login_box_form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          size="medium"
          class="demo-ruleForm"
        >
          <el-form-item label="" prop="user">
            <el-input
              type="txt"
              prefix-icon="el-icon-user"
              v-model="ruleForm.user"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="" prop="pass">
            <el-input
              type="password"
              prefix-icon="el-icon-lock"
              v-model="ruleForm.pass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getlogin } from "@/api/http.js";
export default {
  data() {
    // 账号验证 只有 一个 为空判断
    var checkUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入登录名称"));
      } else {
        callback();
      }
    };
    // 密码 验证  密码长度在 3 到 10 个字符

    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入登录密码"));
      } else {
        let arg = /^[a-zA-Z0-9]{3,10}$/;
        if (!arg.test(value)) {
          callback(new Error("密码长度在 3 到 10 个字符"));
        } else {
          callback();
        }
      }
    };

    return {
      ruleForm: {
        user: "admin",
        pass: "123456",
      },
      rules: {
        user: [{ validator: checkUser, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  mounted() {
    localStorage.removeItem("path");
  },
  methods: {
    submitForm(formName) {
      // console.log(this.$refs[formName]);
      let news = this.$refs[formName].model;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isgologin(news);
        } else {
          this.$message({
            message: "登录失败",
            duration: 1000,
            type: "warning",
          });
          //   this.$message.error('错了哦，这是一条错误消息');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 传入参数 是否 登录
    isgologin(news) {
      getlogin({
        data: {
          username: news.user,
          password: news.pass,
        },
      }).then((res) => {
        console.log(res);
        if (res.meta.status == 200) {
          localStorage.setItem("token", res.data.token);
          this.$message({
            message: res.meta.msg,
            duration: 1000,
            type: "success",
          });
          this.$router.push("/about");
        } else {
          // this.$message({
          //   message: res.meta.msg,
          //   duration: 1000,
          //   type: "warning"
          // });
          //   this.$message.error('错了哦，这是一条错误消息');
        }
      });
    },
  },
  components: {},
};
</script>

<style lang='scss' scoped>
.login {
  width: 100%;
  height: 833px;
  background-color: aliceblue;
  position: relative;

  .login_box {
    width: 550px;
    height: 304px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px #ddd;
    .login_box_log {
      width: 100%;
      height: 118px;
      position: relative;
      .login_box_log_img {
        width: 230px;
        height: 230px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0px 0px 10px #6b6868;
        // border: 1px solid red;
        position: absolute;
        left: 50%;
        top: -120%;
        margin-left: -106px;

        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 90%;
          height: 90%;
          background: #eee;
          border-radius: 50%;
        }
      }
    }
    .login_box_form {
      width: 90%;
      height: 186px;
      margin: 0 auto;
      //   display: flex;
      //   justify-content: center;
      //   align-items: center;
    }
  }
}
</style>


